<template>
  <div id="item5Main" ref="itemRef"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    dataNum: 0,
  },
  data() {
    return {
      myChart: null,
      option: {},
    };
  },
  mounted() {
    let chartDom = this.$refs.itemRef;
    this.myChart = echarts.init(chartDom, null, {
      devicePixelRatio: 2.5,
    });
    this.option = {
      title: {
        text: this.dataNum + '%',
        x: 'center',
        y: '43%',
        textStyle: {
          fontWeight: 'normal',
          color: '#fff',
          fontSize: '14',
        },
        itemGap: 5,
        subtext: '合格率',
        subtextStyle: {
          color: '#fff',
          fontSize: 12,
        },
      },

      color: ['#3A4365', '#90E796'],
      series: [
        {
          zlevel: 10,
          type: 'pie',
          clockWise: true,
          radius: ['70%', '85%'],
          center: ['50%', '50%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          hoverAnimation: false,
          data: [
            {
              value: this.dataNum,
              itemStyle: {
                normal: {
                  color: this.dataNum == 100 ? '#8FE896' : '#FF4E4D',
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
            },
            {
              value: 100 - this.dataNum,
            },
          ],
        },
        {
          type: 'pie',
          clockWise: true,
          radius: ['0%', '90%'],
          center: ['50%', '50%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          hoverAnimation: false,
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: '#3A4365',
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
            },
          ],
        },
      ],
    };
    this.myChart.setOption(this.option);
    // myChart.clear();
    // 设置实例参数
    // myChart.setOption(option);
    let index = 0; //默认选中第二个
    this.myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: index, //默认选中第二个
    });
    this.$nextTick(() => {
      this.myChart.resize();
    });
    window.addEventListener('resize', () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="less" scoped>
#item5Main {
  width: 100%;
  height: 100%;
}
</style>
